<template>
    <cell-wrapper
      v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
      :key="wrapperType"
      :wrapper-type="wrapperType"
      :style="{ backgroundColor: contentStyle.backgroundColor }"
    >
      <text-display-cell
        v-if="!editState"
        :text="value"
        :columnConfig="columnsConfig"
        v-bind="contentStyle"
      />
      <a-input v-else :value="value" @change="handleValueChange" />
    </cell-wrapper>
  </template>
  
  <script>
    import { computed, defineComponent } from 'vue';
    import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
    import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
    import { generateContentStyle, judgeCellEditable } from '@/utils/index';
  
    export default defineComponent({
      name: 'TextTableCell',
      components: {
        TextDisplayCell,
        CellWrapper,
      },
      inheritAttrs: false,
      props: {
        // 当前单元格的值
        value: {
          type: [String, Number, Boolean],
          default: () => {
            return null;
          },
        },
        // 单元格的默认样式
        defaultStyle: {
          type: Object,
          default: () => ({}),
        },
        // 单元格的条件样式配置
        conditionStyle: {
          type: Array,
          default: () => {
            return [];
          },
        },
        // 当前行的数据
        rowData: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
        conditionValueMap: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 当前列的配置
        columnsConfig: {
          type: Object,
          default: () => {
            return {};
          },
        },
        // 当前单元格是否处于编辑状态
        isEdit: {
          type: Boolean,
          default: () => {
            return false;
          },
        },
      },
      emits: ['change'],
      setup(props, { emit }) {
        const editState = computed(() => {
          return (
            props.isEdit &&
            judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
          );
        });
        // 内容显示的样式
        const contentStyle = computed(() => {
          return generateContentStyle(
            props.columnsConfig.contentConfig,
            props.rowData,
            props.conditionValueMap,
          );
        });
  
        function handleValueChange(event) {
          emit('change', event.target.value);
        }
        return {
          editState,
          contentStyle,
          handleValueChange,
        };
      },
    });
  </script>
  